// 描述 元素的节点类型, 属性 , 子元素

function createTextNode(text) {
  return {
    type: "TEXT_ELEMENT",
    nodeValue: text,
    children: [],
  };
}

function createElement(type, props, ...children) {
  return {
    type,
    props,
    children,
  };
}
// 通过吧节点描述为虚拟dom,通过render函数来转成真是dom节点,挂载到root上
const app = createElement("div", { id: "app" }, createTextNode("hello world"));
function render(el, container) {
  const dom =
    el.type === "TEXT_ELEMENT"
      ? document.createTextNode(el.nodeValue)
      : document.createElement(el.type);
  console.log(el.props);
  el.props &&
    Object.keys(el.props).forEach((prop) => {
      console.log(prop, "prop");
      if (prop !== "children") {
        dom[prop] = el.props[prop];
      }
    });
  el.children.forEach((child) => render(child, dom));
}

const root = document.querySelector("#root");
render(app, root);
